next.config.js Options: webpack | 您所在的位置:网站首页 › nextconfigjs Options rewrites Nextjs › next.config.js Options: webpack |
Custom Webpack Config
Good to know: changes to webpack config are not covered by semver so proceed at your own risk Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case: CSS imports CSS modules Sass/SCSS imports Sass/SCSS modules Customizing babel configurationSome commonly asked for features are available as plugins: @next/mdx @next/bundle-analyzerIn order to extend our usage of webpack, you can define a function that extends its config inside next.config.js, like so: next.config.jsmodule.exports = { webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => { // Important: return the modified config return config }, }The webpack function is executed three times, twice for the server (nodejs / edge runtime) and once for the client. This allows you to distinguish between client and server configuration using the isServer property. The second argument to the webpack function is an object with the following properties: buildId: String - The build id, used as a unique identifier between builds dev: Boolean - Indicates if the compilation will be done in development isServer: Boolean - It's true for server-side compilation, and false for client-side compilation nextRuntime: String | undefined - The target runtime for server-side compilation; either "edge" or "nodejs", it's undefined for client-side compilation. defaultLoaders: Object - Default loaders used internally by Next.js: babel: Object - Default babel-loader configurationExample usage of defaultLoaders.babel: // Example config for adding a loader that depends on babel-loader // This source was taken from the @next/mdx plugin source: // https://github.com/vercel/next.js/tree/canary/packages/next-mdx module.exports = { webpack: (config, options) => { config.module.rules.push({ test: /\.mdx/, use: [ options.defaultLoaders.babel, { loader: '@mdx-js/loader', options: pluginOptions.options, }, ], }) return config }, } nextRuntimeNotice that isServer is true when nextRuntime is "edge" or "nodejs", nextRuntime "edge" is currently for middleware and Server Components in edge runtime only. |
CopyRight 2018-2019 实验室设备网 版权所有 |